<template>
    <a-form ref="formRef" :model="formState" :rules="rules">
        <a-form-item ref="name" label="口味选择" name="meals">
            <a-select v-model:value="formState.meals" :disabled="isDisabled" placeholder="请选择口味">
                <a-select-option v-for="item in mealOptions" :key="item.value" :value="item.value">{{ item.label
                    }}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="忌口食物" name="diet">
            <a-textarea v-model:value="formState.diet" :disabled="isDisabled" :autoSize="{ minRows: 4, maxRows: 4 }" />
        </a-form-item>
        <a-form-item v-if="!isDisabled">
            <div class="btn-area">
                <a-button @click="emit('cancel')">取消</a-button>
                <a-button type="primary" @click="onSubmit">确认</a-button>
            </div>
        </a-form-item>
    </a-form>
</template>

<script setup lang='ts'>
import type { Rule } from 'ant-design-vue/es/form';
const emit = defineEmits(["cancel", 'confirm'])
const props = defineProps(['mealsMap'])
const isDisabled = ref<boolean>(false)
interface FormState {
    meals: string;
    diet: string;
}

const formState = ref<FormState>({
    meals: '',
    diet: '',
});

const rules: Record<string, Rule[]> = {
    meals: [{ required: true, message: '请选择口味', trigger: 'change' }],
    diet: [
        { required: true, message: '请输入忌口食物', trigger: 'blur' },
        { min: 1, max: 50, message: '不超过50字', trigger: 'blur' }],
};

const mealOptions = [
    {
        label: '辣',
        value: '辣',
    },
    {
        label: '不辣',
        value: '不辣',
    },

];
watch(() => props.mealsMap, (val) => {
    if (val.meals) {
        isDisabled.value = true
        formState.value.meals = val.meals
        formState.value.diet = val.diet
    } else {
        isDisabled.value = false
    }
}, { immediate: true })

const formRef = ref<any>();
const onSubmit = async () => {
    const res = await formRef.value.validate();
    if (!res) return;
    emit("confirm", formState.value)

};
</script>

<style lang="scss" scoped>
.measl-title {
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    line-height: 23px;
    margin-bottom: 23px;
}

.btn-area {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
</style>